<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"       
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <h:head>
            <title>
                <ui:insert name="tituloPagina"></ui:insert>
            </title>
        </h:head>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
        <h:outputScript library="sistema" name="sistema.js"/>      
    </h:head>
    <h:body onload="fillthescreen()">     
        <p:growl id="groMensajes" autoUpdate="true" />

        <p:idleMonitor timeout="#{session.maxInactiveInterval * 500}" >            
            <p:ajax event="idle" listener="#{controladorLogin.salir}" onstart="diaCaduco.show();"  />  
        </p:idleMonitor>  
        <p:dialog header="Sessión caducada" onHide="location.href='about:blank';window.close();" resizable="false" widgetVar="diaCaduco" modal="true" closable="true" width="400" visible="false">  
            <div align="center">
                <h:outputText value="La sesión ha caducado, debido a la inactividad en el sistema" />                                   
            </div>
        </p:dialog>



        <div id="header">
            <h:panelGrid columns="4" style="width: 99%" >
                <h:panelGrid columns="2">
                    <h:outputLink value="index.jsf" hreflang="index.jsf">
                        <h:graphicImage value="../imagenes/logo1.png" height="64"/>
                    </h:outputLink>  
                    <p>INSTITUTO “NIÑO JESUS DE PRAGA”</p>
                </h:panelGrid>

                <h:panelGrid columns="2" >
                    <h:graphicImage value="../imagenes/im_persona.png"/>
                    <p:outputLabel style="font-size: 12px" value="#{controladorLogin.strNick}"/>
                    <h:graphicImage value="../imagenes/im_calendario.png"/>
                    <p:outputLabel style="font-size: 12px" value="#{controladorLogin.strFecha}"/>
                </h:panelGrid>
            </h:panelGrid> 
        </div>
        <h:form transient="true">
            <p:ajaxStatus style="position:fixed;right:5px;top:18px" >  
                <f:facet name="start">  
                    <h:graphicImage value="../imagenes/im_cargar.gif" />  
                </f:facet>  
                <f:facet name="complete">  
                    <h:outputText value="" />  
                </f:facet>  
            </p:ajaxStatus> 
            <p:commandLink title="Cerrar Sesión" style="position:fixed;right:2px;top:1px;" action="#{controladorLogin.salir}">
                <h:graphicImage value="../imagenes/im_salir_sistema.png" width="32" height="32"/>
            </p:commandLink>
        </h:form>


        <p:dialog id="diaClave" appendToBody="true" widgetVar="wdiaClave" visible="#{pre_portal.booCambiaClave}" header="Cambiar Clave" modal="true"  width="410" height="230" resizable="false" closable="false">
            <h:form>                    
                <h:panelGrid width="100%" columns="2">                    	
                    <h:outputText value="Clave Actual :"/>
                    <p:password value="#{controladorLogin.strClaveActua}"/>
                    <f:facet name="footer">
                        <h:outputText style="font-weight: bold;font-style: oblique;" value="La nueva clave debe contener almenos una letra Mayúscula y un dígito numérico"/>
                        <p:separator/>
                    </f:facet>                    
                </h:panelGrid>
                <h:panelGrid width="100%" columns="2">                    	
                    <h:outputText value="Clave Nueva :"/>
                    <p:password value="#{controladorLogin.strClaveNueva}" goodLabel="Buena" weakLabel="Débil" strongLabel="Segura" promptLabel="Ingrese una clave" feedback="false" redisplay="true"/>
                    <h:outputText value="Confirmar Clave Nuevo :"/>
                    <p:password value="#{controladorLogin.strConfirmaClaveNueva}"/> 

                    <f:facet name="footer">
                        <p:toolbar>
                            <p:toolbarGroup align="left">
                                <p:commandButton update="@form" style="float: right"  value="Aceptar" action="#{controladorLogin.cambiarClave}"/>    
                            </p:toolbarGroup>
                            <p:toolbarGroup align="right">
                                <p:commandButton update=":diaClave" style="padding-left: 6px"  value="Cancelar" action="#{controladorLogin.cancelarCambiarClave}" />    
                            </p:toolbarGroup>                        
                        </p:toolbar>
                    </f:facet>
                </h:panelGrid>


            </h:form>
        </p:dialog>



        <h:form>
            <p:menubar  binding="#{controladorMenu.menu}" autoDisplay="false" >                       
                <p:menuitem value="CAMBIAR CLAVE"  icon="ui-clave" onclick="wdiaClave.show();" />
            </p:menubar> 
        </h:form>


        <div id="container" class="ui-layout-unit-content ui-widget-content">
            <div id="col1" style="width: 100%">
                <ui:insert name="contenido">
                </ui:insert>
            </div>
        </div>
    </h:body>
</html>

